<style lang="less">
    @import './message.less';
</style>

<template>
    <div class="message-main-con">
        <div class="message-mainlist-con">
            <div>
                <Button @click="setCurrentMesType('unread')" size="large" long type="text">
                    <transition name="mes-current-type-btn">
                        <Icon v-show="currentMessageType === 'unread'" type="checkmark"></Icon>
                    </transition>
                    <span class="mes-type-btn-text">未读消息</span>
                    <Badge class="message-count-badge-outer" class-name="message-count-badge" :count="user_info.unread_message_count"></Badge>
                </Button>
            </div>
            <div>
                <Button @click="setCurrentMesType('hasread')" size="large" long type="text">
                    <transition name="mes-current-type-btn">
                        <Icon v-show="currentMessageType === 'hasread'" type="checkmark"></Icon>
                    </transition>
                    <span class="mes-type-btn-text">已读消息</span>
                    <Badge class="message-count-badge-outer" class-name="message-count-badge" :count="user_info.read_message_count"></Badge>
                </Button>
            </div>
            <div>
                <Button @click="setCurrentMesType('recyclebin')" size="large" long type="text">
                    <transition name="mes-current-type-btn">
                        <Icon v-show="currentMessageType === 'recyclebin'" type="checkmark"></Icon>
                    </transition>
                    <span class="mes-type-btn-text">回收站</span>
                    <Badge class="message-count-badge-outer" class-name="message-count-badge" :count="user_info.recycle_message_count"></Badge>
                </Button>
            </div>
        </div>
        <div class="message-content-con">
            <transition name="view-message">
                <div v-if="showMesTitleList" class="message-title-list-con">
                        <Table @on-selection-change="handleMes" ref="messageList" :columns="mesTitleColumns" :data="currentMesList" :no-data-text="noDataText" :loading="is_loading"></Table>
                        <AutoPage v-model="page"></AutoPage>
                </div>
            </transition>
            <transition name="back-message-list">
                <div v-if="!showMesTitleList" class="message-view-content-con">
                    <div class="message-content-top-bar">
                        <span class="mes-back-btn-con"><Button type="text" @click="backMesTitleList"><Icon type="chevron-left"></Icon>&nbsp;&nbsp;返回</Button></span>
                        <h3 class="mes-title">{{ mes.title }}</h3>
                    </div>
                    <p class="mes-time-con"><Icon type="android-time"></Icon>&nbsp;&nbsp;{{ mes.formated_create_time }}</p>
                    <div class="message-content-body">
                        <p class="message-content">{{ mes.content }}</p>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
import AutoPage from "@/common/components/AutoPage"
import Page from "@/common/model/Page"
import MemberMessage from "@/common/model/MemberMessage"
export default {
    name: 'message_index',
    data () {
        const markAsreadBtn = (h, params) => {
            return h('Button', {
                props: {
                    size: 'small'
                },
                on: {
                    click: () => {
                        this.api.post("memberMessage/checkMessage",{id:params.row.id},res=>{
                            this.user_info.unread_message_count = this.user_info.unread_message_count - 1;
                            this.user_info.read_message_count = this.user_info.read_message_count + 1;
                            this.page.getData(res => {
                                this.is_loading = false;
                            });
                        });
                    }
                }
            }, '标为已读');
        };
        const deleteMesBtn = (h, params) => {
            return h('Button', {
                props: {
                    size: 'small',
                    type: 'error'
                },
                on: {
                    click: () => {
                        this.api.post("memberMessage/toRecycle",{id:params.row.id},res=>{
                            this.user_info.read_message_count = this.user_info.read_message_count - 1;
                            this.user_info.recycle_message_count = this.user_info.recycle_message_count + 1;
                            this.$CustomMessage.success("删除成功！可在回收站查看！");
                            this.page.getData(res => {
                                this.is_loading = false;
                            });
                        });
                    }
                }
            }, '删除');
        };
        const restoreBtn = (h, params) => {
            return h('Button', {
                props: {
                    size: 'small',
                    type: 'success'
                },
                on: {
                    click: () => {
                        this.api.post("memberMessage/getBack",{id:params.row.id},res=>{
                            this.user_info.read_message_count = this.user_info.read_message_count + 1;
                            this.user_info.recycle_message_count = this.user_info.recycle_message_count - 1;
                            this.$CustomMessage.success("还原成功！");
                            this.page.getData(res => {
                                this.is_loading = false;
                            });
                        });
                    }
                }
            }, '还原');
        };
        const deleteRecBtn = (h, params) => {
            return h('Button', {
                props: {
                    size: 'small',
                    type: 'error'
                },
                on: {
                    click: () => {
                        if(confirm("确定删除吗？删除后不可恢复")){
                            this.api.post("memberMessage/delete",{id:params.row.id},res=>{
                                this.user_info.recycle_message_count -= 1;
                                this.$CustomMessage.success("删除成功！");
                                this.page.getData(res => {
                                    this.is_loading = false;
                                });
                            });
                        }
                    }
                }
            }, '删除');
        };
        return {
            is_loading: true,
            mesListHandle:[],
            mesIdList:[],
            page: new Page("memberMessage/unreadList", null, res => { this.is_loading = false; }),
            currentMessageType: 'unread',
            showMesTitleList: true,
            noDataText: '暂无未读消息',
            mes: new MemberMessage(),
            mesTitleColumns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                },
                {
                    title: ' ',
                    key: 'title',
                    align: 'left',
                    ellipsis: true,
                    renderHeader: (h,params) =>{
                        if (this.currentMessageType === 'unread') {
                            return h('Button',{
                                props: {
                                    size: 'small'
                                },
                                on:{
                                    click: () => {
                                        this.api.post("memberMessage/checkMessageList",{idList:this.mesIdList},res=>{
                                            this.user_info.unread_message_count = this.user_info.unread_message_count - this.mesIdList.length;
                                            this.user_info.read_message_count = this.user_info.read_message_count + this.mesIdList.length;
                                            this.page.getData(res => {
                                                this.is_loading = false;
                                            });
                                        });
                                    }
                                }
                            },"批量标为已读");
                        } else if (this.currentMessageType === 'hasread') {
                            return h('Button',{
                                props: {
                                    size: 'small'
                                },
                                on:{
                                    click: () => {
                                        if(this.mesIdList.length > 0){
                                                this.api.post("memberMessage/toRecycleList",{idList:this.mesIdList},res=>{
                                                this.user_info.read_message_count = this.user_info.read_message_count - this.mesIdList.length;
                                                this.user_info.recycle_message_count = this.user_info.recycle_message_count + this.mesIdList.length;
                                                this.$CustomMessage.success("删除成功！可在回收站查看！");
                                                this.page.getData(res => {
                                                    this.is_loading = false;
                                                });
                                            });
                                        }else{
                                            return false;
                                        }
                                    }
                                }
                            },"批量删除");
                        } else {
                            return h('Button',{
                                props: {
                                    size: 'small'
                                },
                                on:{
                                    click: () => {
                                        if(this.mesIdList.length > 0){
                                            if(confirm("确定删除吗？删除后不可恢复")){
                                                this.api.post("memberMessage/deleteList",{idList:this.mesIdList},res=>{
                                                    this.user_info.recycle_message_count = this.user_info.recycle_message_count - this.mesIdList.length;
                                                    this.$CustomMessage.success("删除成功！");
                                                    this.page.getData(res => {
                                                        this.is_loading = false;
                                                    });
                                                });
                                            }
                                        }else{
                                            return false;
                                        }
                                    }
                                }
                            },"批量删除");
                        }
                    },
                    render: (h, params) => {
                        return h('a', {
                            on: {
                                click: () => {
                                    this.showMesTitleList = false;
                                    this.mes.title = params.row.title;
                                    this.mes.formated_create_time = params.row.formated_create_time;
                                    this.mes.content = params.row.content;
                                    if(params.row.status == 0){
                                        this.api.post("memberMessage/checkMessage",{id:params.row.id},res=>{
                                            this.user_info.unread_message_count -= 1;
                                            this.user_info.read_message_count += 1;
                                            this.page.getData(res => {
                                                this.is_loading = false;
                                            });
                                        });
                                    }
                                }
                            }
                        }, params.row.title);
                    }
                },
                {
                    title: ' ',
                    key: 'formated_create_time',
                    align: 'center',
                    width: 180,
                    render: (h, params) => {
                        return h('span', [
                            h('Icon', {
                                props: {
                                    type: 'android-time',
                                    size: 12
                                },
                                style: {
                                    margin: '0 5px'
                                }
                            }),
                            h('span', {
                                props: {
                                    type: 'android-time',
                                    size: 12
                                }
                            }, 
                            params.row.formated_create_time)
                        ]);
                    }
                },
                {
                    title: ' ',
                    key: 'asread',
                    align: 'right',
                    width: 200,
                    render: (h, params) => {
                        if (this.currentMessageType === 'unread') {
                            return h('div', [
                                markAsreadBtn(h, params)
                            ]);
                        } else if (this.currentMessageType === 'hasread') {
                            return h('div', [
                                deleteMesBtn(h, params)
                            ]);
                        } else {
                            return h('div',[ restoreBtn(h, params),deleteRecBtn(h, params)]);
                        }
                    }
                }
            ]
        };
    },
    computed:{
        user_info() {
            return this.$store.state.user.info;
        },
        currentMesList() {
            var type = this.currentMessageType;
            if (type === 'unread') {
                this.noDataText = '暂无未读消息';
            } else if (type === 'hasread') {
                this.noDataText = '暂无已读消息';
            } else {
                this.noDataText = '回收站无消息';
            }
            return MemberMessage.parseList(this.page.list);
        }
    },
    components:{ AutoPage },
    methods: {
        handleMes(selection){
            this.mesListHandle = selection;
            this.mesIdList = [];
            for(var i = 0;i < this.mesListHandle.length;i++){
                this.mesIdList.push(this.mesListHandle[i].id);
            }
        },
        backMesTitleList () {
            this.showMesTitleList = true;
        },
        setCurrentMesType (type) {
            this.page.list = [];
            if (this.currentMessageType !== type) {
                this.showMesTitleList = true;
            }
            this.currentMessageType = type;

            if (type === 'unread') {
                this.page.action = "memberMessage/unreadList";
            } else if (type === 'hasread') {
                this.page.action = "memberMessage/readList";
            } else {
                this.page.action = "memberMessage/recycleList";
            }
            this.is_loading = true;
            this.page.getData(res => {
                this.is_loading = false;
            });
        },
        hasNewMessage() {
            this.user_info.unread_message_count = this.$store.state.app.has_new_message.length;
            this.setCurrentMesType("unread");
        }
    },
    watch: {
        "$store.state.app.has_new_message": "hasNewMessage"
    }
};
</script>

